<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>专场拍</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>



    <style>
        .bd-0 {
            display: none;
        }

        .active {
            display: block;
        }
    </style>
</head>

<body>
    <!--头部-->
    <div class="public-header flex">
        <!--<span class="public-header-left-search"></span>-->
        <span class="public-header-left-back"></span>
        <span class="public-header-center">专场拍</span>
        <span class="public-header-right"></span>
    </div>

    <!--正文-->
    <div class="Special-shot bc-gray">
        <div class="top">
            <img src="../img/今日产品 图片@2x.png" alt="">
            <div>内容内容内容内容内容内容内容内容内容内容</div>
        </div>
        <div class="bottom">
            <ul>
                <li class="clearfix">
                    <img src="../img/配图@2x.png" alt="">
                    <div class="right">
                        <p class="p1">内容内容内容内容内容内容</p>
                        <p class="p2">店铺:名称</p>
                        <p class="p3 clearfix">当前价: <span>￥360</span><em>(10人出价)</em></p>
                        <p class="p4 active clearfix">
                            <span>距离结束：</span>
                            <em>2小时37分18秒</em>
                            <i>已提醒</i>
                            <i>提醒我</i>
                        </p>
                    </div>
                </li>
                 <li class="clearfix">
                    <img src="../img/配图@2x.png" alt="">
                    <div class="right">
                        <p class="p1">内容内容内容内容内容内容</p>
                        <p class="p2">店铺:名称</p>
                        <p class="p3 clearfix">当前价: <span>￥360</span><em>(10人出价)</em></p>
                        <p class="p4 active clearfix">
                            <span>距离结束：</span>
                            <em>2小时37分18秒</em>
                            <i>已提醒</i>
                            <i>提醒我</i>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>



    <script>
        $(function () {
            $('.hd a').click(function () {
                var index = $(this).index();
                $(this).addClass('active').siblings().removeClass('active');
                $('.bd-0').eq(index).addClass('active').siblings().removeClass('active');
            })



        })
    </script>
</body>

</html>